import React from 'react'
import { connect } from 'dva'
import { isEmpty, cloneDeep, find, sortBy, pick } from 'lodash'
import { Form, Modal, Row, Spin, Col, Input, Select, Tabs, Table, Tooltip, Button, Icon, Popconfirm, Radio, Tag, DatePicker } from 'antd'
import config from 'config/config'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index.jsx'
import { mapStateToProps } from 'utils/view_utils'
import styles from './allBrokerDetailStyle.less'
import cx from 'classnames'
import moment from 'moment';

//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'

const Option = Select.Optioncomponents
const RadioGroup = Radio.Group
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { MonthPicker, RangePicker } = DatePicker;
const routeView = function ({ dispatch, model, form }) {
    const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
    const { modelObj, namespace } = model
    const { detailData, activeKey, tableData, queryCondition, listData, id, url } = modelObj
    console.log('modelObj', modelObj)
    const formItemLayout = {
        labelCol: { span: 9 }, wrapperCol: { span: 15 }
    };

    const columns = [
        { title: '发展的经纪人编号', dataIndex: 'brokerId', key: 'brokerId', },
        { title: '发展的经纪人', dataIndex: 'name', key: 'name' },
        { title: '注册时间', dataIndex: 'createTime', key: 'createTime' },
        { title: '推介人数', dataIndex: 'recommendNum', key: 'recommendNum', },

    ];

    //model数据更新
    function inputChange(name, value) {
        dispatch({
            type: `${namespace}/updateStore`,
            payload: Object.assign(queryCondition, { [name]: value })
        });
    }

    //分页
    const pagination = {
        current: listData.pageNo,
        pageNo: listData.pageNo,
        pageSize: listData.pageSize,
        total: listData.total,
        showTotal: e => '共 ' + listData.total + ' 条',
        showSizeChanger: true,
        showQuickJumper: true,
        onChange: changePage, //分页事件
        onShowSizeChange: changePage, //每页条数
    }

    //翻页函数
    function changePage(page, pageSize) {
        dispatch({
            type: `${namespace}/queryInfo`,
            payload: { pageNo: page, pageSize: pageSize }
        });
    }
    //导出
    async function downLoad(id) {
        await dispatch({
            type: `${namespace}/downLoad`,
            payload: { id }
        });
    }
    return <div className="public_listMain">
        <div className={'customForm'}>
            <CollapsiblePanels title=''>
                <Form autoComplete="off" className="auto-wrap">
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="经纪人编号">
                                <div>{detailData.brokerId}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="经纪人姓名">
                                <div>{detailData.name}</div>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row >
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="发展经纪人数">
                                <div>{detailData.devBrokerNum}</div>

                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="注册时间">
                                <div>{detailData.createTime}</div>
                            </FormItem>
                        </Col>

                    </Row>

                </Form>
            </CollapsiblePanels>


        </div>

        <div className="boxShadow" >
            <div style={{ marginBottom: 48 }}>
                {
                    <FlagBtn node={<Button type="primary" loading={modelObj.exportLoading} style={{ position: "absolute", right: 120 }} onClick={() => {
                        downLoad(id)
                    }
                    }>导出</Button>} btnId={'50202'}> </FlagBtn>
                    // <Button type="primary" loading={modelObj.exportLoading} style={{ position: "absolute", right: 120 }} onClick={() => {
                    //     downLoad(id)
                    // }
                    // }>导出</Button>
                }
            </div>

            <Table columns={columns}
                dataSource={tableData.dataSource}
                pagination={pagination}
            />
        </div>


    </div>
}

export default connect(mapStateToProps)(Form.create()(routeView))
